<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}
interface PackageItem {
    name: string;
    price: number;
    day: number;
    id:number
}
import { onMounted, ref, reactive, defineProps } from 'vue';
import { https } from '@/api/api'
//const { } = defineProps<Props>();
import Tabbar from '@/components/Tabbar/index.vue'
import { onLoad } from '@dcloudio/uni-app';
import { navigateTo, showToast } from '@/public';
import Boxbg from '@/components/Boxbg/index.vue'
/**
 * @property 变量
 */
// 轮播图图片
const serverListr = [
    '/static/index/banner1.png',
    '/static/index/banner2.png',
]
// 轮播图 当前下表
const swiperIndex = ref(0);
// 套餐列表
const packageList = ref<Array<PackageItem>>([])
/**
 * @property  所有请求以api开头 如:apiDataInfo
 */
//获取套餐列表
const apiPackageList = async () => {
    const res = await https({
        mode: 'package',
        name: 'apiMealIndex',
    })
    if (res.code !== 0) return showToast(res.msg);
    packageList.value = res.data;
}

/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
// 轮播图切换
const changeSwiper = (e: { current: number }) => {
    swiperIndex.value = Number(e.current)
}
// 跳转套餐详情
const clickJumpPackageDetail = (id: number) => {
    navigateTo('/subPackages/package/detail?id=' + id)
}
/**
 * @property 内置方法
 */
onLoad(async () => {
    apiPackageList();
})

</script>
<template>
    <Boxbg classNme="relative" bgImg="index">
        <!-- <div class="h-368 def-bg">
        </div> -->
        <up-navbar title="WiFi租赁" titleStyle="color:#fff;font-weight:500;" placeholder bgColor="transparent">
            <template #left>
                <text></text>
            </template>
        </up-navbar>
        <!-- 轮播图 -->
        <div class="mt-45rpx w-[100%] h-288 b-rd-2">
            <up-swiper :list="serverListr" height="288rpx" radius="8" circular :current="swiperIndex"
                @change="changeSwiper"></up-swiper>
        </div>
        <!-- 轮播图指示器 -->
        <div class="flex mt-28rpx fc">
            <div class="w-60 fra frb">
                <div class="h-8 " v-for="(_, i) in serverListr.length" :key="i" :style="{
                    width: swiperIndex === i ? '28rpx' : '8rpx',
                    background: swiperIndex === i ? '#00BD78' : '#EBEBEB',
                    borderRadius: swiperIndex === i ? '8rpx' : '50%'
                }"></div>
            </div>
        </div>
        <!-- 套餐列表 -->
        <div class="flex flex-wrap mt-6 frb">
            <div class="w-218 pt-28rpx pb-28rpx fcb  items-center b-rd-1" style="border: 2rpx solid #00CC82;"
                v-for="(item, i) in packageList" :key="i" @click="clickJumpPackageDetail(item.id)"
                :class="i < 3 ? 'item h-240' : 'bg-[#fff] mt-2'">
                <text class="font-size-24 fw500">{{ item.name }}</text>
                <div class="flex items-end" v-if="i < 3">
                    <text class="font-size-24 def-c" style="line-height: 24rpx;">¥</text>
                    <text class="font-size-56 fw-500 def-c" style="line-height: 46rpx;">{{ item.price }}</text>
                </div>
                <text class="font-size-24 c-[#777777]">租期：{{ item.day }}天</text>
            </div>
        </div>
        <!-- 点击租赁 -->
        <div class="mt-8.5 fc" @click="navigateTo('/subPackages/orderPage/deviceOrderConfirm')">
            <img src="/static/home/but.png" alt="" class="w-240 h-240 lease" />
        </div>
    </Boxbg>

    <!-- 自定义tabbar -->
    <Tabbar />
</template>
<style lang="scss" scoped>
::deep(.u-swiper__indicator) {
    bottom: -20px !important;
}

.item {
    background: linear-gradient(147.85deg, #F5FFFB 0%, #EBFFF7 24.14%, #D1FFEE 100%);
}

.lease {
    // transform: scale(0.8);
    // transition: all 0.3s linear;
    animation: leaseAn 1s infinite;
}

@keyframes leaseAn {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.9);
    }
}
</style>